<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="定时任务">
        <a-form :model="formState">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="任务名称">
                <a-input
                  style="width: 100%"
                  v-model:value="formState.searchCondition"
                  placeholder="输入关键字查找"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="任务状态">
                <a-select
                  ref="select"
                  v-model:value="formState.status"
                  style="width: 100%"
                  placeholder="状态"
                >
                  <a-select-option :value="-1">全部</a-select-option>
                  <a-select-option :value="0">正常</a-select-option>
                  <a-select-option :value="1">暂停</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div class="layout-flexSpace">
          <a-space wrap>
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
          <a-space wrap>
            <a-button type="primary" @click="handelOpen('新建任务', {})"
              >新建</a-button
            >
          </a-space>
        </div>
      </a-card>
      <a-card>
        <a-table
          :dataSource="dataSource"
          :columns="taskColumns"
          :pagination="pagination"
          @change="handleChangeSize"
        >
          <template #bodyCell="{ column, index, record }">
            <template v-if="column.key === 'index'">
              <div>
                {{ index + 1 }}
              </div>
            </template>
            <template v-if="column.key === 'status'">
              <a-popconfirm
                :title="`确认要${record.status == 1 ? '启动' : '暂停'}任务吗？`"
                ok-text="是"
                cancel-text="否"
                @confirm="confirmStatus(record)"
              >
                <a-switch :checkedValue="record.status == 1" />
              </a-popconfirm>
            </template>
            <template v-if="column.key === 'operate'">
              <a-space>
                <a-button type="primary" @click="handelOpen('编辑任务', record)"
                  >编辑</a-button
                >
                <a-popconfirm
                  title="您是否要执行一次该任务吗?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="handelRun(record)"
                >
                  <a-button type="primary">执行一次</a-button>
                </a-popconfirm>
                <a-popconfirm
                  title="您是否要删除此条数据?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="confirm(record)"
                >
                  <a-button danger type="primary">删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-space>
    <addTaskModal ref="addTaskModalRef" @refreshList="handleSearch" />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { taskColumns } from "./columns.js";
import { taskList, taskChangeStatus, taskDelete, taskRun } from "@/api/task";
import addTaskModal from "./components/addTaskModal.vue";
const pagination = ref({
  current: 1,
  pageSize: 10,
  defaultPageSize: 10,
  total: 0,
  showSizeChanger: true,
  pageSizeOptions: ["10", "20", "50", "100"],
  showTotal: () => `共 ${pagination.value.total} 条`,
});
const formState = ref({
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  searchCondition: undefined,
  status: -1,
});
const dataSource = ref([]);
const getTaskList = async () => {
  const data = await taskList(formState.value);
  if (data.code === 200) {
    dataSource.value = data.data.list;
    pagination.value.total = data.data.total;
  }
};
function handleChangeSize(page) {
  formState.value.page = page.current;
  formState.value.pageSize = page.pageSize;
  pagination.value.current = page.current;
  pagination.value.pageSize = page.pageSize;
  getTaskList();
}
function handleReset() {
  formState.value = {
    page: 1,
    pageSize: 10,
    searchCondition: undefined,
    status: -1,
  };
  pagination.value.current = 1
  pagination.value.pageSize = 10
  getTaskList();
}
function confirmStatus(record) {
  const formD = Object.assign({}, record);
  formD.status = formD.status == 1 ? 0 : 1;
  taskChangeStatus(formD).then((res) => {
    if (res.code === 200) {
      getTaskList();
    }
  });
}
function confirm(record) {
  taskDelete({ jobId: record.jobId }).then((res) => {
    if (res.code === 200) {
      getTaskList();
    }
  });
}
function handelRun(row) {
  taskRun({ jobId: row.jobId }).then((res) => {
    if (res.code === 200) {
      getTaskList();
    }
  });
}
function handleSearch() {
  formState.value.page = 1
  formState.value.pageSize = 10
  getTaskList();
}
const addTaskModalRef = ref(null);
const handelOpen = (titles, record) => {
  addTaskModalRef.value.open(titles, record);
};

onMounted(() => {
  getTaskList();
});
</script>
<style lang="scss" scoped></style>
